import echarts from 'echarts'

export default {
  name: 'storageTransfer',
  data() {
    return {
      searchId: '',
      cpuChartData: [],
      memoryChartData: [],
      diskChartData: [],
      networkChartData: [],
      hostInfoList: [],
      hostInfoShow: { id: 0, cpu: { useRatio: '80%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
        referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
      memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
        speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
      disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
      network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }}
    }
  },
  created() {
  },

  async mounted() {
    this.makeCharts()
    this.getList()
  },
  methods: {
    getList() {
      this.hostInfoList = [{ id: '0', cpu: { useRatio: '80%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
        referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
      memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
        speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
      disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
      network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
      { id: '1', cpu: { useRatio: '84%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
        referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
      memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
        speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
      disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
      network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
      { id: '2', cpu: { useRatio: '70%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
        referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
      memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
        speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
      disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
      network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }},
      { id: '3', cpu: { useRatio: '90%', speed: '3.89GHZ', process: '210', thread: '3008', handle: '115863', operationTime: '23:00:56:37',
        referenceSpeed: '3.00 GHz', slot: 1, kernel: 6, logicProcessor: 6, virtualization: '已启用', l1: '384KB', l2: '1.5MB', l3: '9.0MB' },
      memory: { using: '10.2GB', usable: '5.2GB', submitted: '20.4/30.7GB', cache: '4.1GB', pagingBuffer: '1.0GB', nonPagingBuffer: '977MB',
        speed: '2666 MHz', usedSlot: '2/4', shape: 'DIMM', reservedMemory: '165MB' },
      disk: { activeTime: '13%', argResponseTime: '1.4ms', readSpeed: '0KB/s', writeSpeed: '2.8MB/s', capacity: '932GB', formatted: '931GB', systemDisk: '是', pageFile: '是', type: 'HDD' },
      network: { send: '16Kbps', receive: '24Kbps', adapter: '以太网', connectType: '以太网', IPv4: '11.4.11.11', IPv6: 'fe80::f9b6:a4b4:3116:592b%8' }}]
    },
    searchHost() {
      const flag = this.getInfoShow(this.searchId)
      if (flag) {
        this.makeCharts()
      }
    },
    makeData() {
      const base = +new Date()
      const data = []
      for (let i = -60; i < 0; i++) {
        const now = new Date((base + i * 1000))
        data.push([+now, Math.abs(Math.random()).toFixed(2)])
      }
      return data
    },
    getChartsData() {
      this.cpuChartData = this.makeData()
      this.memoryChartData = this.makeData()
      this.diskChartData = this.makeData()
      this.networkChartData = this.makeData()
    },
    makeCharts() {
      this.getChartsData()
      const cpuChart = echarts.init(document.getElementById('CPUChart'), 'dark')
      const memoryChart = echarts.init(document.getElementById('memoryChart'), 'dark')
      const diskChart = echarts.init(document.getElementById('diskChart'), 'dark')
      const networkChart = echarts.init(document.getElementById('networkChart'), 'dark')

      const cpuChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          left: 'center',
          text: ''
        },
        backgroundColor: 'transparent',
        toolbox: {
        },
        xAxis: {
          type: 'time',
          boundaryGap: false
        },
        yAxis: {
          max: 1,
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: this.cpuChartData,
            itemStyle: {
              color: '#6495ED'
            }
          }
        ]
      }

      const memoryChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          left: 'center',
          text: ''
        },
        backgroundColor: 'transparent',
        toolbox: {
        },
        xAxis: {
          type: 'time',
          boundaryGap: false
        },
        yAxis: {
          max: 1,
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: this.memoryChartData,
            itemStyle: {
              color: '#6495ED'
            }
          }
        ]
      }

      const diskChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          left: 'center',
          text: ''
        },
        backgroundColor: 'transparent',
        toolbox: {
        },
        xAxis: {
          type: 'time',
          boundaryGap: false
        },
        yAxis: {
          max: 1,
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: this.diskChartData,
            itemStyle: {
              color: '#6495ED'
            }
          }
        ]
      }

      const networkChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          left: 'center',
          text: ''
        },
        backgroundColor: 'transparent',
        toolbox: {
        },
        xAxis: {
          type: 'time',
          boundaryGap: false
        },
        yAxis: {
          max: 1,
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: this.networkChartData,
            itemStyle: {
              color: '#6495ED'
            }
          }
        ]
      }

      cpuChart.setOption(cpuChartOption)
      memoryChart.setOption(memoryChartOption)
      diskChart.setOption(diskChartOption)
      networkChart.setOption(networkChartOption)
    },
    getInfoShow(hostId) {
      let idFlag = 0
      for (let i = 0; i < this.hostInfoList.length; i++) {
        if (this.hostInfoList[i].id === hostId) {
          this.hostInfoShow = this.hostInfoList[i]
          idFlag = 1
        }
      }
      if (idFlag === 0) {
        this.$message({
          message: '请输入正确的主机ID',
          type: 'warning'
        })
        return false
      } else {
        return true
      }
    },
    fullScreen() {
      const element = document.getElementById('entirety')
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    }

  }
}
